<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=640,user-scalable=no,target-densitydpi = device-dpi"/>  
        <script src="./libs/jquery.min.js"></script>
        <script src="./libs/jQueryRotate.2.2.js"></script>
        <script src="./libs/jquery.easing.min.js"></script>
        <style>
        	html{
        		font-size: 24px;
        	} 
     	    body{
     	    	width: 100%;
     	    	background-color: #c72222;
     	    	margin: 0;
    			padding: 0;
     	    }
     	    h3{
     	    	color: white;
     	    }
     	    .top{
     	    	text-align: center;
    			margin: 2rem;
     	    }
     	    .turnplate{
     	    	position: relative;
     	    }
     	    .zp {
			    width: 80%;
			    height: 20rem;
			    margin: 1rem auto 0;
			    text-align: center;
			}
			.zp img{
				width: 17.5rem;
				transform: rotate(22.5deg);
			}
			.cj {
			    position: absolute;
			    top: 3.8rem;
			    left: 50%;
			    margin-left: -4.9rem;
			}
			.cj img{
				width: 112%;
			}
			.sd {
			    position: relative;
			    width: 24rem;
			    margin: -8rem auto 0;
			    z-index: -2;
			}
     	    .chance{
     	    	margin: 1rem auto;
    			width: 20rem;
     	    }
     	    .chance h3{
     	    	border: 1px solid #e44025;
			    width: 15rem;
			    height: 3rem;
			    border-radius: 2rem;
			    line-height: 3rem;
			    text-align: center;
			    background-color: #d82828;
			    margin: 0 auto;
     	    }
     	    .chance h3 b{
     	    	color: #ffb820;
     	    }
     	    .list{
     	    	min-height: 8rem;
     	    	max-height: 14rem;
     	    	text-align: left;
			    color: #ffb820;
			    background-color: #b21b1b;
			    padding: 1rem;
			    line-height: 1.5rem;
			    overflow: auto;
     	    }
     	    .list ul{
     	    	list-style: none;
			    padding: 0;
			    font-size: 24px;
			    line-height: 2rem;
			    margin: 0rem;
     	    }
     	    .awards h3{
     	    	color: #ffb820;
     	    }
     	    .awards,.description{
     	    	text-align: center;
    			padding: 1rem;
     	    }
     	    .description h3{
     	    	color: #ffb820;
     	    }
     	    .content{
     	    	text-align: left;
			    color: #ffb820;
			    background-color: #b21b1b;
			    padding: 1rem;
     	    }
     	    .head{
     	    	display: flex;;
     	    	flex-direction: row;
     	    	justify-content:space-between;
     	    }
     	    .head span{
     	    	display: block;
			    line-height: 3rem;
			    color: #ffb820;
     	    }
        </style>  
    </head>  
    <body>
    	<h3 class="top">
    		幸运大抽奖
    	</h3>
    	<!-- 抽奖区 -->
        <div class="turnplate">
        	<div class="zp">
        		<img id="zp" src="./img/turnplate.png" alt="" >
        	</div>
        	<div class="cj" id="cj">
        		<img src="./img/cursor.png" alt="">
        	</div>
            <div class="sd">
            	<img src="./img/shadow.png" alt="">
            </div>
        </div>  
        <div class="chance">
        	<h3>
        		您还有 <b id="num">3</b> 次抽奖机会
        	</h3>
        </div>
        <!-- 获奖信息 -->
		<div class="awards">
			<div class="head">
				<span>___________________</span>
				<h3>
					获奖用户
				</h3>
				<span>___________________</span>
			</div>
			<div class="list">
				<ul>
					<li>
					恭喜手机号150****7705的用户获得一等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得二等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得三等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得一等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得二等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得三等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得一等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得二等奖
				</li>
				<li>
					恭喜手机号150****7705的用户获得三等奖
				</li>
				</ul>
			</div>
		</div>
		<!-- 活动说明 -->
		<div class="description">
			<div class="head">
				<span>___________________</span>
				<h3>
					活动说明
				</h3>
				<span>___________________</span>
			</div>
			<div class="content">
				<p>
					活动时间:10月1日-10月30日
				</p>
				<p>
					每个新用户可以获得3次抽奖机会
				</p>
				<p>
					每日签到或者邀请好友可以获得一次抽奖机会
				</p>
			</div>
		</div>
		<!-- 获奖反馈 -->
		<style>
			.module{
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.8);
				text-align: center;
				z-index: 2;
				display: none;
			}
			.msg{
				margin: 1rem;
				color: white;
			}
			.img{
				margin: 11rem 0 0;
			}
		</style>
		<!-- 模态框 -->
		<div class="module">
			
			<div class="img">
				<img src="./img/zj.png" alt="">
			</div>
			<div class="msg">
				恭喜你中奖了!
			</div>
		</div>

		<!-- 获取用户信息 -->
		<style>
			.userinfo{
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.8);
				text-align: center;
				z-index: 2;
				display: none;
			}
			.info{
				margin: 6rem auto 0;
			    width: 70%;
			    min-height: 18rem;
			    border-radius: 1rem;
			    background-color: lightseagreen;
			    border: 1px solid white;
			    color: white;
			}
			.title{
				margin: 1.5rem auto;
				font-weight: 600;
				font-size: 1.5rem;
			}
			.info form{
				line-height: 3rem;
			}
			.info input{
				/*height: 1rem;*/
			    width: 12rem;
			    font-size: 1.5rem;
			    border-radius: .3rem;
			}
			.info p{
				margin: 1.5rem auto;
				font-size: 1.2rem;
				line-height: 2rem;
			}
			button#submit {
			    width: 6rem;
			    height: 2rem;
			    font-size: 1.2rem;
			}
		</style>
		<div class="userinfo">
			<div class="info">
				<div class="title">获奖用户信息登记</div>
				<form action="">
					<label for="name">用户名:&nbsp;</label>&nbsp;
					<input type="text" id="name" autofocus title="" size="15" maxlength='10' />
					<br/>
					<label for="phone">手机号:&nbsp;</label>&nbsp;
					<input type="tel" id="phone" pattern="[0-9]{11}" autofocus title="输入11位手机号码" maxlength='11' size="15" required />
					<br/>
					<label for="qq">QQ号:&nbsp;</label>&nbsp;
					<input type="tel" id="qq" pattern="[0-9]" autofocus title="输入5-11位qq号码" maxlength='11' size="15" />
					<br/>
					<button id="submit">提交</button>
				</form>
				<!-- <p>
					关注微信号wei_xin_chenchen了解获奖详情
				</p> -->
				
			</div>
		</div>
    </body>  
    <script>
        	$(function(){
        		// 清空浏览器存储的用户信息
        		localStorage.removeItem('userinfo');
        		// 创建用户信息对象
	    		var userinfo = {};
	    		userinfo.award = [];
	    		// 获奖用户信息登记阶段标识
	    		var registrationPhase = false;
        		// 获取抽奖次数
        		var count = $('#num').text();
        		$('#cj').rotate({
        			bind:{
        				click:function(){
        					if(count < 1){
        						alert('你的抽奖次数已用完');
        						return;
        					}
        					count--;
        					var that  = this;
        					that.angle = this.angle || 22.5;
			        		var cycle = 6;
			        		var step = 45;
			        		var time = 6000;
        					var random = Math.floor(Math.random()*8);
        					// var random = 2;
        					// 执行动画
        					$('#zp').rotate({
        						angle:that.angle,
								animateTo:that.angle+360*cycle+step*random,
								duration:time,
								easing:$.easing.easeInOutBack,
								callback:function(){
									// 动画执行完毕后回调
									that.angle = $(this).getRotateAngle()[0];
									var index = Math.floor(that.angle%360/45);
									// console.log(index);
									if (count==0) {registrationPhase=true;}
									$('#num').html(count);
									switch(true){
										case index == 0 || index == 1 || index == 3 || index == 5 || index == 6:
										alert('很遗憾,你没有中奖');
										getInfo();
										break;
										case index == 2:
										popup('恭喜你,中了二等奖!');
										userinfo.award.push('二等奖');
										break;
										case index == 4:
										popup('恭喜你,中了一等奖!');
										userinfo.award.push('一等奖');
										break;
										case index == 7:
										popup('恭喜你,中了三等奖!');
										userinfo.award.push('三等奖');
										break;
									}
									
								}
        					});
        					
        				}
        			}
        		});
        		// 获奖弹窗函数
        		function popup(text){
        			$('.module').fadeIn();
        			$('.msg').html(text);
        		}
        		// 隐藏弹窗函数
        		function hide(obj){
        			$(obj).fadeOut();
        		}
        		// 抽奖结束弹窗函数
        		function getInfo(){
        			if(registrationPhase&&userinfo.award[0]){
		        		$('.userinfo').fadeIn();
		        	}
        		}

        		// 点击弹窗隐藏
        		$('.module').click(function(){
        			hide('.module');
        			getInfo();
        		})

        		// 点击提交
	    		$('#submit').click(function(event){
	    			// 写入用户信息
	    			userinfo.name = $('#name').val();
	    			userinfo.phone = $('#phone').val();
	    			userinfo.qq = $('#qq').val();
	    			if(!userinfo.phone){
	    				alert('请填好信息再提交');
	    				return;
	    			}
	    			// 用户信息存入localstorage
	    			localStorage.setItem('userinfo', JSON.stringify(userinfo));
	    			setTimeout(function(){
	    				hide('.userinfo');
	    				writeInfo();
	    			},500)

	    			// 阻止浏览器默认提交
	    			var e = event || window.event;
	    			e.preventDefault();
	    			window.event.returnValue = false;
	    			return false;
	    		})

	    		// 读取localstorage信息,写入页面的函数
	    		function writeInfo(){
	    			var read = JSON.parse(localStorage.getItem('userinfo'));
		    		console.log(read["phone"]);
		    		var phone = read["phone"].slice(0,3)+"****"+read["phone"].slice(-4,read["phone"].length);
		    		for (var i = 0; i < read["award"].length; i++) {
		    			$('.list ul').append("<li>恭喜手机号"+phone+"的用户获得"+read["award"][i]+"</li>");
		    		}
		    		
	    		}

        	})
        </script>

</html>  